/* 
 * *PARTE DE DAVID
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
var socket;
var idProyActual;
var notificacion;
var distribuido;
var user;
var canvasActual;
var idxPostActual;

function Usuario(){
    this.id = null;
    this.username = null;
    this.color = null;
}
 
function Canvas(nombre,id){
    this.areas = new Array();
    this.nombreProy = nombre;
    this.id = id;
    this.galeriaActiva=false;
    this.areaSeleccionada = null;
    this.menus = new Array();
    this.menuActivo = null;
    this.postitActivo = null;
    this.$contenedor = $('#canvas');
    this.sombrear = function(){
        this.areaSeleccionada.sombrear();
    };
    
    this.aclarar = function(){
       this.areaSeleccionada.aclarar();
    };
    
    this.dibujarAreas = function(){
        var thisCanvas = this;
         w=screen.width*.85;
         h=screen.height*.85;
         height=0;
         width=0;
         topt=0;
         left=0;
         
        for (var index in this.areas) {
            
                 switch(index){
                        case "0":
                        height=.7161*h;
                        width=.2196*w;
                        topt=.0651*h;
                        left=.0366*w;
                            break;
                        case "1":
                          height=.3554*h;
                          width=.2196*w; 
                          topt=.0651*h;
                          left=.2598*w;
                            break;
                        case "2":
                            height=.3554*h;
                            width=.2196*w; 
                            topt=.4257*h;
                            left=.2598*w;
                            break;
                        case "3":
                            height=.7161*h;
                            width=.2196*w;
                            topt=.0651*h;
                            left=.4831*w; 
                            break;
                        case "4":
                            height=.3554*h;
                           width=.2196*w; 
                          topt=.0651*h;
                           left=.7064*w;
                            break;
                        case "5":
                            height=.3554*h;
                            width=.2196*w; 
                            topt=.4257*h;
                           left=.7064*w;
                            break;
                        case "6":
                            height=.7161*h;
                         width=.2196*w;
                          topt=.0651*h;
                            left=.9297*w; 
                            break;
                        case "7":
                            height=.3255*h;
                            width=.5541*w;
                            topt=.7916*h;
                            left=.0366*w;
                            break;
                        case "8":
                            height=.3255*h;
                           width=.5541*w;
                            topt=.7916*h;
                          left=.5959*w;
                            break;       
                 }
                
                this.areas[index].dibujar(width,height,left,topt);
                
            }
            $('#main').css('width',$('#area-7').width()+$('#area-8').width());
        this.$contenedor.children().each(function(idx,el){
            $(el).click(function(){
                if(thisCanvas.menuActivo != null){
                    canvasActual.menus[0].$contenedor.remove();
                }
               
                thisCanvas.areas[idx].desplegarMenu();              
                thisCanvas.menuActivo = 0;
            });
            $(el).mouseover(function(){
             
                thisCanvas.areas[idx].sombrear();
            });
             $(el).mouseout(function(){
             
                thisCanvas.areas[idx].aclarar();
            });
        });
     this.areaSeleccionada=this.areas[0];   
    };
    
}

function Area(id,nombre,$padre){
    this.postits = new Array();
    this.id = id;
    this.nombre = nombre;
    this.coordenadas = [];
    this.width = 100;
    this.height = 100;
    this.color = 'red';
    this.$contenedor = null;
    this.desplegarMenu = function(){ 
        canvasActual.menuActivo=0;
        canvasActual.areaSeleccionada=this;
        canvasActual.menus[0].dibujar(this.coordenadas[0][0],this.coordenadas[0][1]);      
    };
    
    this.ocultarMenu = function(){
        
        canvasActual.menus[0].ocultar();
    };
    
    this.aclarar = function(){
        this.$contenedor.css('box-shadow','none');
    };
    this.sombrear = function(){
        canvasActual.areaSeleccionada=this;
        this.$contenedor.css('box-shadow','0 0 10px 10px #888');
    
    };
    this.desplegarPostit = function(id){
        if(this.postits.length!=0)
      { 
          canvasActual.postitActivo=this.postits[id];
           canvasActual.postitActivo.dibujar();
          
       $('#postButton').click(function(){
       canvasActual.postitActivo.$contenedor.remove();
       });
       
  }
   else
       alert('Esta area no contiene postits');

   };
    
    this.salirPostit = function(){
        canvasActual.postitActivo.$contenedor.remove();
    };
    this.borrarPostit=function(id){
//        var postits2=new Array();
        EliminarPostit(this.postits[id].id);
//        this.postits[id]=null;
        
//         canvasActual.postitActivo.$contenedor.remove();
//         canvasActual.postitActivo=null;
//        for (var index in this.postits){
//            if(this.postits[index]!=null){
//                postits2.push(this.postits[index]);
////                postits2[index].id=postits2.length-1;
//            }
//             }
//            this.postits= postits2;
            
        //$("#area-"+ id).append('<br><label>'+this.postits.length+'</label>'); 
        
//        limpiar();
//        if(canvasActual.areaSeleccionada.postits.length>0){
//                canvasActual.menus[0].$contenedor.remove();
//                canvasActual.areaSeleccionada.carrusel();           
//                canvasActual.menuActivo = null;
//                canvasActual.galeriaActiva = true;
//        }
//        else{
//            alert('Esta area no contiene postits');
//            canvasActual.menus[0].$contenedor.remove();
//            canvasActual.menuActivo = null;
//            canvasActual.galeriaActiva = false;
//        }
  
    }
    this.guardarPostit = function(){  
        canvasActual.postitActivo.titulo=$('#titulo').get(0).value;
        
        canvasActual.postitActivo.contenido=$('#contenido').get(0).value;
        canvasActual.postitActivo.$contenedor.remove();
        
        guardarPostitAd(canvasActual.postitActivo);
        //alert(this.id);
    
        
        
        
        
           
    };
    
        this.dibujar = function(w,h,l,t){
             switch(id){
                case 0:
                    this.nombre="Key Partners"
                    break;
                     case 1:
                    this.nombre="Key Activities"
                    break;
                     case 2:
                    this.nombre="Key Resources"
                    break;
                     case 3:
                    this.nombre="Value Propositions"
                    break;
                     case 4:
                    this.nombre="Customers Relationships"
                    break;
                     case 5:
                    this.nombre="Channels"
                    break;
                     case 6:
                    this.nombre="Customers Segments"
                    break;
                     case 7:
                    this.nombre="Cost Structure"
                    break;
                     case 8:
                    this.nombre="Revenue Streams"
                    break;
            }
            
            
            this.coordenadas = [[l,t],[l+w,t+h]];
            if(this.postits.length==0)
                this.$contenedor= $('<div class="area" id="area-' + id + '" ><label class="canvasLabel">'+this.nombre+'</label><br><div class="numPost"></div></div>');
            else
                 this.$contenedor= $('<div class="area" id="area-' + id + '" ><label class="canvasLabel">'+this.nombre+'</label>'+'<br><div class="postit"><label>'+this.postits.length+'</label></div><br><div class="numPost">hi</div></div>');
            this.$contenedor.css('width',w);
            this.$contenedor.css('height',h);
            this.$contenedor.css('position','absolute');
            this.$contenedor.css('left',l);
            this.$contenedor.css('top',t);
           
//            this.$contenedor.css('border','solid'); 
//            this.$contenedor.css('background-position','center'); 
//            this.$contenedor.css('background-repeat','no-repeat'); 

            $padre.append(this.$contenedor);
            
            canvasActual.areas[id]=this;
        };
    
      this.carrusel = function(){
        canvasActual.areaSeleccionada=this;
        var carrusel = '<div id="over" class="overbox"><ul id="carrusel">';
        
        for (var index in this.postits) {
            estilo='background:'+distribuido.encontrarColor(this.postits[index].autor)+';';       
            var post='<div id="postit-'+index+'" class="post" style="'+estilo+'"><input type="text" name="titulo" class="titulo"  value="'+this.postits[index].titulo+'" /><input name="contenido" class="contenido" type="text" readonly="readonly" value="'+this.postits[index].contenido+'" /></div>';
            carrusel += '<li><span class="title"></span>'+post+'</li>';               
        }
        
        carrusel += '</ul></div><div id="fade" class="fadebox">&nbsp;</div>';
        $padre.append(carrusel);
        $('#over').css('display','block');
        $('#over').width($('#over').width()*.83+'px');
        $('#over').height($('#over').height()*.83 + 'px');
        $('#over').css('top',screen.height*.83*.15+'px');
        $('#over').css('left',screen.width*.83*.15+'px');
        $('#fade').css('display','block');
        $('#fade').width(screen.width + 'px');
        $('#fade').height(screen.height + 'px');
        for ( index in this.postits) {
          postit=this.postits[index];
          
          $('#postit-'+index).click(function(){
             canvasActual.postitActivo=postit;
             postit.desplegarMenu();
          });
        }
      
        ejecutarCarrusel((this.postits.length / 2));
    }
    
    this.destruirCarrusel = function (){
        $('ul#carrusel').remove();
        $('#over').remove();
        $('#fade').remove();
        galeriaActiva = false;
    }
}

function Menu(){
    this.opciones = new Array();
    this.alto = 0;
    this.opcionSeleccionada = null;
    this.$contenedor = null;
    
    this.sombrear = function(){     
        this.$contenedor.css('box-shadow','0 0 10px 5px #888');
    };
    
    this.aclarar = function(){
             this.$contenedor.css('box-shadow','none0');
    };
      this.ocultar = function(){
             this.$contenedor.remove();
             canvasActual.menuActivo=null;};
    this.dibujar = function(x,y){
        var html = [];
        for (var index in this.opciones) {
            var opcion = this.opciones[index];
         
            html.push('<li id="opcion-'+opcion.id+'" class="menuItem" style="width:100%">'+opcion.titulo+'</li>');
        }        
            this.$contenedor = $('<ul class="menu" id="menu"></ul>');
            this.$contenedor.css('position','absolute');
            this.$contenedor.css('left',x);
            this.$contenedor.css('top',y);
            this.$contenedor.css('z-index',99);
            this.$contenedor.css('border','1px solid red');
            this.$contenedor.css('listStyle','none');            
            this.$contenedor.append(html.join(''));
            
             $('#canvas').append(this.$contenedor);
            
            this.$contenedor.children().each(function(idx,el){
         if(canvasActual.menuActivo==0){
               switch(idx){
               case 0:
                    $(el).click(function(){
                        this.opcionSeleccionada=0;
                      canvasActual.postitActivo=new Postit(user.id);
                      canvasActual.postitActivo.dibujar();     
                        $('#postButton').click(function(){canvasActual.areaSeleccionada.guardarPostit();
                        } );
                      canvasActual.menus[0].$contenedor.remove();
                     
                      });
               break;
               
               case 1:
                     $(el).click(function(){
                         
              if(canvasActual.areaSeleccionada.postits.length>0){  
                     this.opcionSeleccionada=1; 
                     canvasActual.menus[0].$contenedor.remove();
                     canvasActual.areaSeleccionada.carrusel();           
                     
              }
              else{
                  alert('Esta area no contiene postits');
                   canvasActual.menus[0].$contenedor.remove();
              }
                 });
                   
               break;
               case 2:
                      $(el).click(function(){
                    this.opcionSeleccionada=2;
                     canvasActual.menus[0].$contenedor.remove();
                     canvasActual.areaSeleccionada.destruirCarrusel();
                     canvasActual.menus[0].$contenedor.remove();
                      });
               break;
           }
         }
         else{
            
//                    $(el).click(function(){
//                        canvasActual.areaSeleccionada.borrarPostit(canvasActual.postitActivo.id);
//                    
//                      });
               
         }
            $(el).hover(function(){
                $(el).css('background','#B43104');
            },function(){
                $(el).css('background','#FFBF00');
            });
        });
        
      
    };
}


function Postit(autor){
    this.id = null;
   
    this.titulo = "";
    this.autor = autor;
    this.contenido = "";
    this.$contenedor=null;
    this.dibujar=function(){
//        alert('postit nuevo');

        this.$contenedor = $('<div id="postit" class="postitL" style="background:'+distribuido.encontrarColor(autor)+'; "><input   id="titulo" placeholder="Titulo" type="text" x-webkit-speech style="left:20px; top:20px;border-radius:15px; position:relative;height:50px;width:400px;" value="'+this.titulo+'"/><input id="contenido" placeholder="Contenido" type="text" x-webkit-speech style="position:relative; left:20px; top:40px; border-radius:15px; height:300px;width:400px;"  value="'+this.contenido+'""/><input type="button" id="postButton" value="aceptar" style="position:relative; display:none"/></div>');
        this.$contenedor.css('width','450px');
        this.$contenedor.css('height','500px');
        this.$contenedor.css('left',screen.height/1.5+"px");
        this.$contenedor.css('top',screen.width/8+"px");
        this.$contenedor.css('position','absolute');
      //  this.$contenedor.css('border','solid');       
        canvasActual.$contenedor.append(this.$contenedor);
        canvasActual.areaSeleccionada.ocultarMenu();
        canvasActual.postitActivo=this;
        $('#titulo').focus(function(){socket.send('title');});
        $('#contenido').focus(function(){socket.send('content');});
        $('#titulo').focus(function(){
           
            socket.send('title');});
        $('#contenido').focus(function(){
           
            socket.send('content');});
    }
    
    this.desplegarMenu=function(){
        canvasActual.postitActivo=this;
       canvasActual.menuActivo=1;       
        canvasActual.menus[1].dibujar( canvasActual.areaSeleccionada.coordenadas[0][0], canvasActual.areaSeleccionada.coordenadas[0][1]);      
    }
    
}

function mostrarPostitsActuales(areasId){
    
    for(var idx in areasId){
      //  alert(areasId[idx]);
        mostrarNumerosPostitsPorAutor(areasId[idx]);
    }
}

function Opcion(id,titulo){
    this.id = id;
    this.titulo = titulo;
    this.accion=function(){
        switch (this.titulo){
            case 'Agregar postit':
                    this.opcionSeleccionada=0;
                      canvasActual.postitActivo=new Postit(user.id);
                      canvasActual.postitActivo.dibujar();     
                      $('#titulo').focus();
                        $('#postButton').click(function(){canvasActual.areaSeleccionada.guardarPostit();
                        } );
                      canvasActual.menus[0].$contenedor.remove();
                      canvasActual.menuActivo = null;
                         
            break;
            case 'Ver galeria':
              if(canvasActual.areaSeleccionada.postits.length>0){  
                     this.opcionSeleccionada=1; 
                     canvasActual.menus[0].$contenedor.remove();
                     canvasActual.areaSeleccionada.carrusel();           
                     canvasActual.menuActivo = null;
                     canvasActual.galeriaActiva = true;
                     setEstadoCliente();
              }
              else{
                  alert('Esta area no contiene postits');
                   canvasActual.menus[0].$contenedor.remove();
                   canvasActual.menuActivo = null;
              }
            break;
            case 'Borrar postit':
                     canvasActual.areaSeleccionada.borrarPostit(canvasActual.postitActivo.id);
                     canvasActual.menuActivo = null;
            break;
        }
    }
    this.sombrear = function(){

       $('#opcion-'+this.id).css('background','#B43104');
    };
    this.aclarar = function(){
      $('#opcion-'+this.id).css('background','#FFBF00');
    };
    
    
}

function BarraDeUsuarios(){
    this.usuarios=new Array();
    this.contenedor=null;
    this.colores=new Array();
    
    
    this.dibujarBarra=function(colores,usuarios,userNames){
        this.usuarios=usuarios;
        this.colores=colores;
        
        this.dibujarContenedor(colores.length);
        for(var i=0;i<usuarios.length;i++)                  
           this.dibujarUsuario(colores[i],usuarios[i],userNames[i]);            
       $('#barraDeUsuarios').show();
    }
    
    this.ocultarBarra=function(){
       document.getElementById("canvas").removeChild(document.getElementById("barraDeUsuarios"));
    }
    
    this.dibujarUsuario=function(color,usuario,userName){           
    contenido='<br><table id="'+usuario+'" class="onlineUser" style="width:100%"><tr><td style="width:10%;" ><div class="icon" style="background:'+color+'"></div></td><td style="width:90%;"><label>'+userName+'</label></td></tr></table>';
    $("#barraDeUsuarios" ).append(contenido);     
    }
    
    this.actualizarBarra=function(funcion,color,usuario){
   
        if(funcion=="agregar")
            this.dibujarUsuario(color,usuario);
        else
            this.ocultarUsuario(usuario);
    }

    this.ocultarUsuario=function(usuario){
       
        $('table').remove('#'+usuario);
        }
    
    this.dibujarContenedor=function(tamanio){
        contenido='<div id="barraDeUsuarios"  style="background:white; border-radius:15px 0px 0px 15px; "></div>';

        this.contenedor = $(contenido);
        this.contenedor.css('width',screen.width/6+'px');
//        this.contenedor.css('height','98%');
//        this.contenedor.css('right',"10px");
         this.contenedor.css('top','2px');
        this.contenedor.css('position','absolute');
        this.contenedor.css('border','solid');       
          canvasActual.$contenedor.append(this.contenedor);
    }
   
    
}


$(function(){
    canvasActual = new Canvas("Mi canvas", 1);
    var area1 = new Area(0, 'mi area1', canvasActual.$contenedor);
    var area2 = new Area(1, 'mi area2', canvasActual.$contenedor);
    var area3 = new Area(2, 'mi area3', canvasActual.$contenedor);
    var area4 = new Area(3, 'mi area4', canvasActual.$contenedor);
    var area5 = new Area(4, 'mi area5', canvasActual.$contenedor);
    var area6 = new Area(5, 'mi area6', canvasActual.$contenedor);
    var area7 = new Area(6, 'mi area7', canvasActual.$contenedor);
    var area8 = new Area(7, 'mi area8', canvasActual.$contenedor);
    var area9 = new Area(8, 'mi area9', canvasActual.$contenedor);
    
    canvasActual.areas.push(area1);
    canvasActual.areas.push(area2);
    canvasActual.areas.push(area3);
    canvasActual.areas.push(area4);
    canvasActual.areas.push(area5);
    canvasActual.areas.push(area6);
    canvasActual.areas.push(area7);
    canvasActual.areas.push(area8);
    canvasActual.areas.push(area9);
    var menuArea = new Menu();
    menuArea.opciones.push(new Opcion('1', 'Agregar postit' ));
    menuArea.opciones.push(new Opcion('2', 'Ver galeria'));
    var menuPostit = new Menu();
   // menuPostit.opciones.push(new Opcion('3', 'Borrar postit'));
    canvasActual.menus.push(menuArea);
    canvasActual.menus.push(menuPostit);
    canvasActual.dibujarAreas();
    barraDeUsuarios = new BarraDeUsuarios();
    isBarraActiva = false;
//    cont=0;
    notificacion = new Notificacion(canvasActual);
    distribuido = new DespachadorEventosDistribuido();
    user = new Usuario();
//    alert("inicializacion de vista");
    getSession();
    
   // pruebaNotificacion();

});
function crearCarrusel(){
    canvasActual.areas[3].carrusel(); 
}

function ejecutarCarrusel(idx){
        
canvasActual.galeriaActiva = true;
    $('ul#carrusel').jcoverflip({
          current: idx,
          beforeCss: function( el, container, offset ){
              el.find('.titulo').height(Math.max(10,200-20*offset*offset)*.1);
              el.find('.titulo').css('fontSize','small');
              el.find('.contenido').height(Math.max(10,200-20*offset*offset)*.6);
              el.find('.contenido').css('fontSize','small');
            return [
              $.jcoverflip.animationElement( el, {left: ( container.width( )/2 - 370 - 210*offset + 20*offset )+'px', top: '100px'}, { } ),
              $.jcoverflip.animationElement( el.find('.post'), {width: Math.max(10,200-20*offset*offset) + 'px', height: Math.max(10,200-20*offset*offset)}, {} )
            ];
          },
          afterCss: function( el, container, offset ){
              el.find('.titulo').height(Math.max(10,200-20*offset*offset)*.1);
              el.find('.titulo').css('fontSize','small');
              el.find('.contenido').height(Math.max(10,200-20*offset*offset)*.6);
              el.find('.contenido').css('fontSize','small');
            return [
              $.jcoverflip.animationElement( el, {left: ( container.width( )/2 + 200 + 210*offset)+'px', top: '100px'}, { } ),
              $.jcoverflip.animationElement( el.find('.post'), {width: Math.max(10,200-20*offset*offset) + 'px', height: Math.max(10,200-20*offset*offset)}, {} )
            ];
            
          },
          currentCss: function( el, container ){
              idxPostActual = el.find('div.post').attr('id').substr(7);
              el.find('.titulo').height(35);
              el.find('.titulo').css('fontSize','xx-large');
              el.find('.contenido').height(300);
              el.find('.contenido').css('fontSize','xx-large');
            return [
              $.jcoverflip.animationElement( el, {left: ( container.width( )/2 - 160 )+'px', top: 0}, { } ),
              $.jcoverflip.animationElement( el.find('.post'), {width: '350px', height: '400px'}, { } )
            ];
          }
        });
}

function slideRight(){
    $('ul#carrusel').jcoverflip('next',1);
}

function slideLeft(){
    $('ul#carrusel').jcoverflip('previous',1);
}

function limpiar(){
    canvasActual.galeriaActiva = false;
    canvasActual.areas[0].destruirCarrusel();
}

/**
 * PARTE JOSUE RAMOS
 */


var keyCode
function tecla(e){
if(window.event)keyCode=window.event.keyCode;
else if(e) keyCode=e.which;

var eve;
//alert(keyCode)

switch(keyCode){
    case 116:eve='track';
        xx = 500;
        yy = 200;
    break;
    case 111:eve='track';
        xx = 500;
        yy = 600;
    break;
    case 105:eve='swipeLeftToRight';
    break;
    case 100:eve='swipeRightToLeft';
    break;
    case 115:eve='swipeUpToDown';
    break;
    case 99:eve='click';
    break;
    case 98:eve='swipeDownToUp';
    break;
    case 109:eve='track';
        xx = 990;
        yy = 600;
    break;
}


 //alert("Datos obtenidos del Kinect.");
                // Obtener el dato en formato JSON.
//                var jsonObject = eval('('+evt.data+')');
//                var event = jsonObject.event;
//                var xx = parseFloat(jsonObject.x);
//                var yy = parseFloat(jsonObject.y);
                canvas = canvasActual;
                galeriaActiva=canvasActual.galeriaActiva;
                menuActivo = canvasActual.menuActivo;
                areaActiva = canvasActual.areaSeleccionada;
                
                
                
                
//                
//                console.log(menuActivo);
//                
//                console.log(event+" x="+xx+" y="+yy);
                
                
               switch(eve){
                    case 'track':
                        if(canvasActual.menuActivo!=null && !canvasActual.galeriaActiva && canvasActual.postitActivo==null){
//                            console.log("AreaSeleccionada "+canvas.areaSeleccionada.id);
                            menu = canvasActual.menus[canvasActual.menuActivo];
                            opcionSeleccionada = Math.floor(yy/(768/menu.opciones.length));
//                            console.log("opcionSeleccionada"+opcionSeleccionada);
                            
                            for(i=0;i<menu.opciones.length;i++){
                                menu.opciones[i].aclarar();
                            }
                            canvasActual.menus[canvasActual.menuActivo].opcionSeleccionada = opcionSeleccionada;
                            menu.opciones[opcionSeleccionada].sombrear();

                        }
                        else if(canvasActual.menuActivo==null && canvasActual.postitActivo==null && !canvasActual.galeriaActiva){
                            ubicacion = null;
                            
                            if(isMenuArea(xx,yy) && !isBarraActiva){
                                for(i=0;i<canvasActual.areas.length;i++){
                                    canvasActual.areas[i].aclarar();
                                }
                                getUsuariosLogueados();
                                var users = distribuido.getUsers();
                                var colors = distribuido.getColors();
                                var userNames = distribuido.getUserNames();
                                barraDeUsuarios.dibujarBarra(colors,users,userNames);
                                isBarraActiva = true;
                            }
                            else if(!isMenuArea(xx, yy)){
                                
                                if(isBarraActiva)
                                    barraDeUsuarios.ocultarBarra();
                                
                                isBarraActiva = false;
                                ubicacion = getUbicacion(xx,yy);
                                
                                
                                if(ubicacion.id != canvasActual.areaSeleccionada.id){
                                    mostrarPostitsActuales(new Array('0','1','2','3','4','5','6','7','8'));
                                    for(i=0;i<canvasActual.areas.length;i++){
                                        canvasActual.areas[i].aclarar();
                                    }
                                    if(ubicacion!=null){
    //                                    console.log("Ubicacion "+ubicacion.id);
                                        canvasActual.areaSeleccionada = ubicacion;
                                        canvasActual.areaSeleccionada.sombrear();
                                        mostrarNumerosPostitsPorAutor(canvasActual.areaSeleccionada.id);
                                    }
                                }
                            }
                        }
                    break;
                    case 'swipeDownToUp':
                        if(canvasActual.galeriaActiva){
                            if(canvasActual.areaSeleccionada.postits[idxPostActual].autor == user.id){
                                
                                canvasActual.areaSeleccionada.borrarPostit(idxPostActual);
                                setEstadoCliente();
                            }
                        }
                    break;
                    case 'swipeUpToDown':
                        if(canvasActual.galeriaActiva){
                           limpiar();
                           setEstadoCliente();
                        }
                        else if(canvasActual.menuActivo!=null && !canvasActual.galeriaActiva && canvasActual.postitActivo==null){
                           canvasActual.areaSeleccionada.ocultarMenu();
                        }
                        else if(canvasActual.postitActivo!=null && !canvasActual.galeriaActiva){
//                            alert('salir postit');
                            canvasActual.areaSeleccionada.ocultarMenu();
                           canvasActual.areaSeleccionada.guardarPostit();
                        }
                        else{
                          //  canvas.salir();
                        }
                    break;
                    case 'click':
                        if(canvasActual.menuActivo!=null && !canvasActual.galeriaActiva){
//                            console.log("click");
//                            console.log("opcionSeleccionada"+canvas.menus[menuActivo].opcionSeleccionada);
//                            console.log(canvas.menus[menuActivo].opciones[canvas.menus[menuActivo].opcionSeleccionada].titulo)
                            canvasActual.menus[canvasActual.menuActivo].opciones[canvasActual.menus[canvasActual.menuActivo].opcionSeleccionada].accion();
                            canvasActual.areaSeleccionada.ocultarMenu();
                        }
                        else if(canvasActual.menuActivo==null && canvasActual.postitActivo==null && !canvasActual.galeriaActiva){
                          canvasActual.areaSeleccionada.desplegarMenu();
                        }
                    break;
                    case 'swipeLeftToRight':
                        console.log("swapLR");
                        if(canvasActual.galeriaActiva){
                           slideRight();
                        }
                        else if(canvasActual.postitActivo!=null){
                            $('#contenido').focus();
                        }
                        
                    break;
                    case 'swipeRightToLeft':
                        if(canvasActual.galeriaActiva){
                           slideLeft();
                        }
                    break;
                    default:
                                        
                                        break;
                }


}




/*

$(function(){

        if (window.hasOwnProperty("WebSocket")) { // webkit-browser
                socket = new WebSocket("ws://localhost:1990/");
        }
        else if (window.hasOwnProperty("MozWebSocket")) { // firefox 
                socket = new MozWebSocket("ws://localhost:1990/");
        }
        else { // El explorador no soporta WebSocket
                //alaert("Tu explorador no soporta web sockets!.");
                return;
        }

        socket.onopen = function() { // El socket esta listo, eviar algo
             // alert("open");
        };



        socket.onmessage = function (evt) {
                //alert("Datos obtenidos del Kinect.");
                galeriaActiva = false;
                // Obtener el dato en formato JSON.
                var jsonObject = eval('('+evt.data+')');
                var eve = jsonObject.event;
                var xx = parseFloat(jsonObject.x);
                var yy = parseFloat(jsonObject.y);
                

                  canvas = canvasActual;
                galeriaActiva=canvasActual.galeriaActiva;
                menuActivo = canvas.menuActivo;
                areaActiva = canvas.areaSeleccionada;
                
                
                
                
//                
//                console.log(menuActivo);
//                
//                console.log(event+" x="+xx+" y="+yy);
                
                
               switch(eve){
                    case 'track':
                        if(menuActivo!=null && !galeriaActiva && canvas.postitActivo==null){
//                            console.log("AreaSeleccionada "+canvas.areaSeleccionada.id);
                            menu = canvas.menus[menuActivo];
                            opcionSeleccionada = Math.floor(yy/(768/menu.opciones.length));
//                            console.log("opcionSeleccionada"+opcionSeleccionada);
                            
                            for(i=0;i<menu.opciones.length;i++){
                                menu.opciones[i].aclarar();
                            }
                            canvasActual.menus[menuActivo].opcionSeleccionada = opcionSeleccionada;
                            menu.opciones[opcionSeleccionada].sombrear();

                        }
                        else if(menuActivo==null && canvas.postitActivo==null && !galeriaActiva){
                            ubicacion = null;
                            
                            if(isMenuArea(xx,yy) && !isBarraActiva){
                                for(i=0;i<canvasActual.areas.length;i++){
                                    canvasActual.areas[i].aclarar();
                                }
                                getUsuariosLogueados();
                                var users = distribuido.getUsers();
                                var colors = distribuido.getColors();
//                                var users = new Array();
//                                var colors = new Array();
//                                users[0] = "jos";
//                                colors[0] = "blue";
//                                if(cont>0){
//                                    for(var i=1;i<=cont;i++){
//                                        colors[i] = "blue";
//                                        users[i] = "jos"+(cont+i);
//                                    }
//                                }
//                                cont++;
                                    
                                barraDeUsuarios.dibujarBarra(colors,users);
                                isBarraActiva = true;
                            }
                            else if(!isMenuArea(xx, yy)){
                                
                                if(isBarraActiva)
                                    barraDeUsuarios.ocultarBarra();
                                isBarraActiva = false;
                                ubicacion = getUbicacion(xx,yy);
                                
                                
                                if(ubicacion.id != canvas.areaSeleccionada.id){
                                    for(i=0;i<canvasActual.areas.length;i++){
                                        canvasActual.areas[i].aclarar();
                                        $("#area-"+ canvasActual.areas[i].id).append('<br><div class="postit"><label>'+canvasActual.areas[canvasActual.areas[i].id].postits.length+'</label></div>');
                                    }
                                    if(ubicacion!=null){
    //                                    console.log("Ubicacion "+ubicacion.id);
                                        canvasActual.areaSeleccionada = ubicacion;
                                        ubicacion.sombrear();
                                        mostrarNumerosPostitsPorAutor(ubicacion.id);
                                    }

                                    

                                }
                                
                            }
                                
                            
                        }
                    break;
                    case 'swipeDownToUp':
                        if(galeriaActiva){
                           canvasActual.areaSeleccionada.borrarPostit(idxPostActual);
                        }
                    break;
                    case 'swipeUpToDown':
                        if(galeriaActiva){
                           limpiar();
                        }
                        else if(menuActivo!=null && !galeriaActiva && canvasActual.postitActivo==null){
                           areaActiva.ocultarMenu();
                        }
                        else if(canvasActual.postitActivo!=null && !galeriaActiva){
//                            alert('salir postit');
                            areaActiva.ocultarMenu();
                           canvasActual.areaSeleccionada.guardarPostit();
                        }
                        else{
                          //  canvas.salir();
                        }
                    break;
                    case 'click':
                        if(menuActivo!=null && !galeriaActiva){
//                            console.log("click");
//                            console.log("opcionSeleccionada"+canvas.menus[menuActivo].opcionSeleccionada);
//                            console.log(canvas.menus[menuActivo].opciones[canvas.menus[menuActivo].opcionSeleccionada].titulo)
                            canvas.menus[menuActivo].opciones[canvas.menus[menuActivo].opcionSeleccionada].accion();
                            areaActiva.ocultarMenu();
                        }
                        else if(menuActivo==null && canvas.postitActivo==null && !galeriaActiva){
                          areaActiva.desplegarMenu();
                        }
                    break;
                    case 'swipeLeftToRight':
                        console.log("swapLR");
                        if(galeriaActiva){
                           slideRight();
                        }
                        else if(canvas.postitActivo!=null){
                            $('#contenido').focus();
                        }
                        
                    break;
                    case 'swipeRightToLeft':
                        if(galeriaActiva){
                           slideLeft();
                        }
                    break;
                    default:
                                        
                                        break;
                }

        };

        socket.onclose = function() { // El servidor cierra la conexion
                alert("Conexion cerrada");
        };
});

*/

function isMenuArea(x,y){
    if(x>900)
        return true;
    else
        return false;
}


function getUbicacion(x,y){
    for(i=0;i<canvasActual.areas.length;i++){
        xPost1 = canvasActual.areas[i].coordenadas[0][0];
        yPost1 = canvasActual.areas[i].coordenadas[0][1];
        xPost2 = canvasActual.areas[i].coordenadas[1][0];
        yPost2 = canvasActual.areas[i].coordenadas[1][1];
        
//        console.log(xPost1+"<"+x+"<"+xPost2+"--------"+yPost1+"<"+y+"<"+yPost2+"");
        
        if((xPost1<x && x<xPost2) && (yPost1<y && y<yPost2)){
//            alert(canvasActual.areas[i].id);
            return canvasActual.areas[i];
        }
        
        
    }
    return null;
}

function getIndxPostit(id,area){
    if(canvasActual.areas[area]!=null){
        for(var i = 0 ;i<canvasActual.areas[area].postits.length;i++){
            if(canvasActual.areas[area].postits[i]!=null && canvasActual.areas[area].postits[i].id==id){
                return i;
            }
        }
    }
    
    return "no encontrado";
    
}


